<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .active {
        width: 300px;
        height: 300px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <!-- <div
      style="width: 200px; height: 200px; background-color: red"
      class="box myclass"
    ></div> -->
    <div class="box myclass"></div>
    <button class="btn1">获取box样式</button>
    <button class="btn2">设置元素的样式</button>
    <button class="btn3">修改类名</button>
    <button class="btn4">点我获取元素的类名</button>
    <script>
      /* 
    一.样式操作 style
    1.获取样式 元素.style.属性名
    注意: 通过style只能获取行内样式,不能获取内嵌和外链的样式
    */ //只能获取行内样式
      var btn = document.querySelector(".btn1");
      var boxEle = document.querySelector(".box");
      btn.onclick = function () {
        //注意: 如果获取的是复合样式,通过.语法  那么-后面的字符需要转化成大写
        console.log(boxEle.style.backgroundColor);
        console.log(boxEle.style["background-color"]);
      };

      //2.设置元素的样式
      //只能设置行间样式
      var btn = document.querySelector(".btn2");
      btn.onclick = function () {
        boxEle.style.backgroundColor = "blue";
      };

      //二.类名操作 className
      //1.设置类名:会覆盖之前的类名
      //修改一个元素的类名
      var btn = document.querySelector(".btn3");
      btn.onclick = function () {
        boxEle.className = "active";
      };

      //2.获取元素的类名
      var btn = document.querySelector(".btn4");
      btn.onclick = function () {
        console.log(boxEle.className); //获取类名
      };
    </script>
  </body>
</html>
